<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" style="background:white;padding-top:20px">
      <el-row :gutter="20">
        <el-form-item label="日期" prop="busDate">
          <el-date-picker v-model="form.busDate" type="date" placeholder="选择日期" @change="routIdGet" style="width:93%" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="线路" prop="route_id">
          <el-select v-model="form.route_id" placeholder="请选择" @change="routIdGet" clearable filterable>
            <el-option v-for="(item, index) in lineInfo" :key="index" :label="item.lineName" :value="item.lineId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号" prop="route_name">
          <el-input v-model="license_no" clearable />
        </el-form-item>
        <nm-button type="primary" @click="routIdGet" text="查询" style="margin-left:20px"></nm-button>
        <nm-button type="primary" @click="inquire" text="读取" style="margin-left:20px"></nm-button>
      </el-row>
      <!-- 车辆信息 -->
      <el-dialog title="车辆信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column prop="license_no" label="车牌号" width="180"> </el-table-column>
          <el-table-column prop="road_worthiness_certificate_expiry_date" label="行驶证有效期" width="180"><template slot-scope="scope">
              <span :class="classObject">{{ scope.row.road_worthiness_certificate_expiry_date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="road_transportation_permit_card_expiry_date" label="运营证有效期">
            <template slot-scope="scope">
              <span :class="classObject2">{{ scope.row.road_transportation_permit_card_expiry_date }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="Box">
          <div class="small">
            <div class="boxes"></div>
            <span class="text">证件过期</span>
          </div>
          <div class="small">
            <div class="boxes1"></div>
            <span class="text">10日内到期</span>
          </div>
          <div class="small">
            <div class="boxes2"></div>
            <span class="text">正常</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" v-if="verification" @click="getClasses">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 驾驶员信息 -->
      <el-dialog title="驾驶员信息" :visible.sync="dialog" width="40%" :before-close="handleClose">
        <el-row :gutter="20">
          <el-form-item label="身份证" prop="busDate">
            <el-input v-model="driverCard" clearable />
          </el-form-item>
          <nm-button type="primary" @click="getDriver" text="读取" style="margin-left:20px"></nm-button>

          <el-table :data="driverList" stripe border style="width: 100%">
            <el-table-column prop="driver_name" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="driver_contact" label="手机号" width="180"> </el-table-column>
            <el-table-column prop="driving_license_expiry_date" label="驾驶证有效期" width="180"><template slot-scope="scope">
                <span :class="`${scope.row.status == 3 ? 'classA' : scope.row.status == 2 ? 'classB' : 'classC'}`">{{ scope.row.driving_license_expiry_date }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="qualification_certificate_card_expiry_date" label="从业资格证有效期">
              <template slot-scope="scope">
                <span :class="`${scope.row.status2 == 3 ? 'classD' : scope.row.status2 == 2 ? 'classE' : 'classF'}`">{{ scope.row.qualification_certificate_card_expiry_date }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div class="Box">
          <div class="small">
            <div class="boxes"></div>
            <span class="text">证件过期</span>
          </div>
          <div class="small">
            <div class="boxes1"></div>
            <span class="text">10日内到期</span>
          </div>
          <div class="small">
            <div class="boxes2"></div>
            <span class="text">正常</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" v-if="accord" @click="getWork">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>

    <el-table ref="topictable" :max-height="tabheight" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
      <el-table-column label="" width="40">
        <template slot-scope="scope">
          <el-radio :label="scope.$index" v-model="radio" @change.native="currentRow(scope.row)" style="color: #fff;padding-left: 5px; "></el-radio>
        </template>
      </el-table-column>
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column prop="busNo" label="班次"> </el-table-column>
      <el-table-column prop="openOrClose" label="开停">
        <template slot-scope="scope">
          <span>{{ scope.row.openOrClose == true ? '开' : '停' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="stationName" label="车站名称"> </el-table-column>
      <el-table-column prop="busTime" label="开点"> </el-table-column>
      <el-table-column prop="routeName" label="线路名称"> </el-table-column>
      <el-table-column prop="miles" label="里程(KM)"> </el-table-column>
      <el-table-column prop="busType" label="车型"> </el-table-column>
      <el-table-column prop="grade" label="等级">
        <template slot-scope="scope">
          <span>{{ scope.row.grade ? scope.row.grade : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="company" label="公司"> </el-table-column>
      <el-table-column prop="total_seat" label="定">
        <template slot-scope="scope">
          <span>{{ scope.row.total_seat ? scope.row.total_seat : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sold_seat" label="售">
        <template slot-scope="scope">
          <span>{{ scope.row.sold_seat ? scope.row.sold_seat : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="标示">
        <template slot-scope="scope">
          <span>{{ scope.row.flag == '1' ? '固定班' : '流水班' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop=" is_overtime" label="加班">
        <template slot-scope="scope">
          <span>{{ scope.row.is_overtime == true ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="vehicle_id" label="车辆代码">
        <template slot-scope="scope">
          <span>{{ scope.row.vehicle_id ? scope.row.vehicle_id : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lineCode" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.reportStatus == '0' ? '未报班' : scope.row.reportStatus == '1' ? '已报班' : scope.row.reportStatus == '2' ? '已作废' : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="licensePlateNo" label="车牌号"> </el-table-column>
      <el-table-column prop="self_no" label="自编号">
        <template slot-scope="scope">
          <span>{{ scope.row.self_no ? scope.row.self_no : '无' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="lineCode" label="报班"> </el-table-column> -->
      <el-table-column prop="modifiedTime" label="修改时间">
        <template slot-scope="scope">
          <span>{{ scope.row.modifiedTime ? scope.row.modifiedTime : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="driver_name" label="司机">
        <template slot-scope="scope">
          <span>{{ scope.row.driver_name ? scope.row.driver_name : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="driver_contact" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.driver_contact ? scope.row.driver_contact : '无' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="paginationChange" background layout="prev, pager, next" :total="total" />
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import $ from '../../utils/jquery-3.5.1.min'

// import SavePage from '../components/save'
// import detailList from '../components/detailList'

const api = $api.dispatch.vehicle_report

export default {
  name: page.name,
  mixins: [mixins.list],
  // components: { SavePage, detailList },
  data() {
    return {
      radio: '',
      form: {
        busDate: '',
        route_id: '',
      },
      license_no: '', //车牌号
      dialogVisible: false,
      tableData: [],
      classObject: {
        class_a: false,
        class_b: false,
        class_c: false,
      },
      classObject2: {
        class_d: false,
        class_e: false,
        class_f: false,
      },
      verification: false,
      dialog: false,
      accord: false,
      driverList: [], //驾驶员信息
      lineInfo: [], //线路
      busInfoList: [], //班次列表
      getList: [], //表格数据
      driverCard: '', //身份证号
      attendClass: '', //报班信息
      company_id: '', //公司id
      vehicle_id: '', //车辆id
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {
          /** 线路名称 */
          route_name: '',
        },
      },
      removeAction: api.remove,
      buttons: page.buttons,
      tabheight: 400,
      pageNum: 1,
      pageSize: 10,
      total: 0,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.getBusInfo()
    this.getTime()
    this.getLineInfo()
    this.getVehicleInfo()
    this.routIdGet()
  },
  methods: {
    // 翻页
    paginationChange(val) {
      this.pageNum = val
      this.getClasses()
    },
    //表格选择框
    currentRow(row) {
      this.attendClass = row
      document.onkeydown = () => {
        if (window.event.keyCode == 13) {
          // 监听Enter键，绑定驾驶员
          if (this.license_no != '') {
            this.dialog = true
          } else {
            this.inquire()
          }
        }
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.dialog = false
      this.driverCard = ''
      this.driverList = []
    },
    //获取线路
    getLineInfo() {
      api.querylineinfo().then((res) => {
        this.lineInfo = res
      })
    },
    // 查询班次列表
    getBusInfo() {
      api.querybusinfoforselect().then((res) => {
        this.busInfoList = res
      })
    },
    //获取车辆表
    getVehicleInfo() {
      api.vehicleInfoQuery().then((res) => {
        this.vehicleList = res.rows
      })
    },
    //检查证件是否合格封装
    getExamine(val) {
      if (new Date().getTime() < new Date(val).getTime()) {
        let date = (new Date(val).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)
        if (date < 10) {
          this.classObject.class_b = true
        } else {
          this.classObject.class_c = true
        }
      } else {
        this.classObject.class_a = true
      }
    },
    //查询车辆信息/报班列表
    inquire() {
      const that = this
      $.ajax({
        type: 'get',
        async: false,
        url: 'http://127.0.0.1:5000/Card/ReadICCard',
        dataType: 'jsonp',
        success: function (json) {
          if (json.Data) {
            that.license_no = json.Data.plateNumber
            api.getcarinfo({ license_no: json.Data.plateNumber }).then((res) => {
              if (res.infos.length == 0) {
                that.$message.warning('未查询到车辆信息')
              } else {
                var data = that.vehicleList.filter(function (item) {
                  return item.license_no == res.infos[0].license_no
                })
                that.vehicle_id = data[0].vehicle_id
                that.company_id = res.infos[0].company_id
                that.dialogVisible = true
                that.tableData = res.infos
                // 判断行驶证证是否到期
                if (new Date().getTime() < new Date(res.infos[0].road_worthiness_certificate_expiry_date).getTime()) {
                  let date = (new Date(res.infos[0].road_worthiness_certificate_expiry_date).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)
                  if (date < 10) {
                    that.classObject.class_b = true
                  } else {
                    that.classObject.class_c = true
                  }
                } else {
                  that.classObject.class_a = true
                }
                //判断运营证是否到期
                if (new Date().getTime() < new Date(res.infos[0].road_transportation_permit_card_expiry_date).getTime()) {
                  let date = (new Date(res.infos[0].road_transportation_permit_card_expiry_date).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)
                  if (date < 10) {
                    that.classObject2.class_e = true
                  } else {
                    that.classObject2.class_f = true
                  }
                } else {
                  that.classObject2.class_d = true
                }
                //判断能否满足报班条件
                if (
                  new Date().getTime() < new Date(res.infos[0].road_transportation_permit_card_expiry_date).getTime() &&
                  new Date().getTime() < new Date(res.infos[0].road_worthiness_certificate_expiry_date).getTime()
                ) {
                  that.verification = true
                } else {
                  that.verification = false
                }
              }
            })
          } else {
            that.$message.warning(json.Msg)
          }
        },
        error: function (e) {
          that.$message.warning('请开启服务再刷卡')
        },
      })
    },
    routIdGet(val) {
      this.route_id = val ? val : ''
      this.getClasses()
    },
    // 查询报班班次
    getClasses() {
      let data = {
        busDate: this.form.busDate,
        licensePlateNo: this.license_no,
        route_id: this.form.route_id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      api
        .getreportclassbusinfo(data)
        .then((res) => {
          this.getList = res.reports
          this.total = res.totalItems
          this.dialogVisible = false
        })
        .catch((err) => {
          this.getList = []
          this.total = 0
        })
    },
    //获取驾驶员信息请求
    getDrivers(val) {
      api.getonedriver({ driver_idcard: val }).then((res) => {
        this.driverList.push(res)
        this.driverList.forEach((val) => {
          this.$set(val, 'status', '')
          this.$set(val, 'status2', '')
        })
        // 判断驾驶证证是否到期
        for (var i = 0; i < this.driverList.length; i++) {
          if (new Date().getTime() < new Date(this.driverList[i].driving_license_expiry_date).getTime()) {
            let date = (new Date(this.driverList[i].driving_license_expiry_date).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)
            if (date < 10) {
              this.driverList[i].status = 2
            } else {
              this.driverList[i].status = 1
            }
          } else {
            this.driverList[i].status = 3
          }
          //判断从业资格证是否到期
          if (new Date().getTime() < new Date(this.driverList[i].qualification_certificate_card_expiry_date).getTime()) {
            let date = (new Date(this.driverList[i].qualification_certificate_card_expiry_date).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)
            if (date < 10) {
              this.driverList[i].status2 = 2
            } else {
              this.driverList[i].status2 = 1
            }
          } else {
            this.driverList[i].status2 = 3
          }

          //判断能否满足报班条件
          if (
            new Date().getTime() < new Date(this.driverList[i].qualification_certificate_card_expiry_date).getTime() &&
            new Date().getTime() < new Date(this.driverList[i].driving_license_expiry_date).getTime()
          ) {
            this.accord = true
          } else {
            this.accord = false
          }
        }
      })
    },
    //查询驾驶员信息
    getDriver() {
      // 读取身份证
      const that = this
      $.ajax({
        type: 'get',
        async: false,
        url: 'http://localhost:5000/Card/ReadIDCard',
        dataType: 'jsonp',
        success: function (json) {
          if (json.Data) {
            if (json.Code == 1) {
              // 判断身份证重复
              if (that.driverList.length == 0) {
                that.driverCard = json.Data.idCardNo
                that.getDrivers(json.Data.idCardNo)
              } else {
                let status = that.driverList.some((i) => {
                  return i.driver_idcard == json.Data.idCardNo
                })
                if (status == true) {
                  that.$message({
                    message: '身份信息重复',
                    type: 'warning',
                  })
                } else {
                  that.getDrivers(json.Data.idCardNo)
                }
              }
            }
          } else {
            // if (that.driverCard == '') {
            that.$message({
              message: '请输入身份证号',
              type: 'warning',
            })
            // } else {
            //   that.getDrivers(that.driverCard)
            // }
          }
        },
        error: function (e) {
          that.$message.warning('请开启服务再刷卡')
        },
      })
    },
    //报班
    getWork() {
      var userName = Array.from(this.driverList, ({ driver_name }) => driver_name)
      var userPhone = Array.from(this.driverList, ({ driver_contact }) => driver_contact)
      var idNumber = Array.from(this.driverList, ({ driver_idcard }) => driver_idcard)
      this.attendClass['license_no'] = this.license_no
      this.attendClass['driverName'] = String(userName)
      this.attendClass['driPhone'] = String(userPhone)
      this.attendClass['driNo'] = String(idNumber)
      this.attendClass['company_id'] = this.company_id
      this.attendClass['vehicle_id'] = this.vehicle_id
      this.attendClass['busDate'] = this.form.busDate
      api.submitreportclass(this.attendClass).then((res) => {
        if (res.isSuccessForReportClass == true) {
          this.dialog = false
          this.dialogVisible = false
          this.getList = []
          this.license_no = ''
          this.driverList = []
          this.$message({
            message: '报班成功',
            type: 'success',
          })
          this.getClasses()
        } else {
          this.$message.error(res.result)
        }
      })
    },
    // 获取当天日期
    getTime() {
      let date = new Date()
      let y = date.getFullYear()
      let m = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      let d = date.getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      let isDate = y + '-' + m + '-' + d
      this.form.busDate = isDate
    },
  },
}
</script>
<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  padding: 0px 35px 10px;
}
.class_a {
  color: red;
}
.class_b {
  color: Orange;
}
.class_c {
  color: green;
}
.class_d {
  color: red;
}
.class_e {
  color: Orange;
}
.class_f {
  color: green;
}
.Box {
  display: flex;
  position: absolute;
  margin-top: 30px;
}
.small {
  display: flex;
  margin-left: 5px;
}
.boxes {
  width: 10px;
  height: 10px;
  background-color: red;
}
.boxes1 {
  width: 10px;
  height: 10px;
  background-color: Orange;
}
.boxes2 {
  width: 10px;
  height: 10px;
  background-color: green;
}
.text {
  font-size: 10px;
}
.classA {
  color: red;
}
.classB {
  color: Orange;
}
.classC {
  color: green;
}
.classD {
  color: red;
}
.classE {
  color: Orange;
}
.classF {
  color: green;
}
</style>
